<!-- 
  @name: 充值记录
  @date: 2020.3.10
 -->
<template>
	<view class="content">
		<view class="fixed_top">
			<!-- 顶部区域 -->
			<view class="total">
				<view class="tip">总计金额(元)</view>
				<view class="mount">
					<view class="num">{{totalMoney}}</view>
					<view class="select_btn" @tap="openCloseDate">
						<text>日期筛选</text>
						<view class="_triangle" :class="showPopup ? 'atop' : 'abtm'"></view>
						<view class="date-content">
							<view>{{startTime}}</view>
							<view>{{endTime}}</view>
						</view>
					</view>
				</view>
			</view>
			
			<!-- 选项卡 -->
			<tab-card :tab-list="tabList" @click-item="onClickItem"></tab-card>
		</view>
		
		<!-- 日期筛选弹窗 -->
		<date-select
			top="260"
			:show="showPopup"
			:start="startTime"
			:end="endTime"
			@submit="onSubmit"
			@cancle="onCancle">
		</date-select>
		
		<!-- 列表 -->
		<view class="listview">
			<view class="list-card" v-for="(item, index) in lists" :key="item.fillId">
				<view class="top">
					<view class="type">
						<text v-text="item.rechargeType === 1 ? '扫码充值' : '代充值'"></text>
					</view>
					<view class="num">{{item.fillMoney}}元</view>
				</view>
				<view class="btm">{{item.fillTime}}</view>
			</view>
		</view>
		
		<!-- 底部加载提示 -->
		<btm-load></btm-load>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userId: '',  //客户id
				tabList: ['全部', '扫码充值', '代充值'],  //选项卡
				tabIndex: 0,  //选项卡初始面板
				showPopup: false,  //是否显示日期筛选图层
				startTime: '',  //开始日期-提交
				endTime: '',  //结束日期-提交
				lists: [],  //列表
				totalMoney: '-',  //显示的总计金额
				list0: [],  //全部列表
				page0: 1,  //全部页码
				totalMoney0: '-',  //全部总计金额
				list1: [],  //扫码充值列表
				page1: 1,  //扫码充值页码
				totalMoney1: '-',  //扫码充值总计金额
				list2: [],  //代充值列表
				page2: 1,  //代充值页码
				totalMoney2: '-',  //代充值总计金额
			}
		},
		watch: {
			list0(newVal, oldVal) {
				if(this.tabIndex === 0 && newVal !== this.lists) {
					this.lists = this.list0;
				}
			},
			list1(newVal, oldVal) {
				if(this.tabIndex === 1 && newVal !== this.lists) {
					this.lists = this.list1;
				}
			},
			list2(newVal, oldVal) {
				if(this.tabIndex === 2 && newVal !== this.lists) {
					this.lists = this.list2;
				}
			}
		},
		onLoad(e) {
			this.userId = e.userId;
			this.endTime = this.$getToday();
			this.startTime = this.$getStartDay();
			this.getList(0);  //初始tabIndex为0，获取全部
		},
		onShow() {
			if(this.$store.state.reLogin) {
				this.pullDown();
				this.$store.commit('hasLogin');
			}
		},
		onReachBottom() {
			this.$store.commit('btmLoad', true);
			this.getList(this.tabIndex);
		},
		onPullDownRefresh() {
			this.pullDown();
		},
		methods: {
			//下拉刷新
			pullDown() {
				this.showPopup = false;
				this.endTime = this.$getToday();
				this.startTime = this.$getStartDay();
				this.hasSelect();
			},
			//筛选过
			hasSelect() {
				this.list0 = []; this.page0 = 1;
				this.list1 = []; this.page1 = 1;
				this.list2 = []; this.page2 = 1;
				this.getList(this.tabIndex);
			},
			//点击选项卡
			onClickItem(index) {
				if(this.tabIndex !== index) {
					this.tabIndex = index;
					switch(index) {
						case 0: this.lists = this.list0; this.totalMoney = this.totalMoney0; break;
						case 1: this.lists = this.list1; this.totalMoney = this.totalMoney1; break;
						case 2: this.lists = this.list2; this.totalMoney = this.totalMoney2; break;
					}
					if((index === 0 && this.page0 === 1) || (index === 1 && this.page1 === 1) ||
					   (index === 2 && this.page2 === 1)) {
						this.getList(this.tabIndex);
					}
					uni.pageScrollTo({ scrollTop: 0, duration: 200 });
				}
			},
			//获取列表
			getList(status) {
				let page = 0;
				switch(status) {
					case 0: page = this.page0; break;
					case 1: page = this.page1; break;
					case 2: page = this.page2; break;
				}
				this.$http({
					url: this.$api.exchargeUrl + 'shopuserfillrecord',
					data: {
						rechargeType: status,
						startTime: this.startTime,
						endTime: this.endTime,
						userId: this.userId,
						page: page,
						rows: this.$tmp.ROWS_RET
					},
					loading: page > 1 ? 0 : ''
				}).then(res => {
					this.totalMoney = res.totalMoney;
					switch(status) {
						case 0: this.totalMoney0 = res.totalMoney; break;
						case 1: this.totalMoney1 = res.totalMoney; break;
						case 2: this.totalMoney2 = res.totalMoney; break;
					}
					let arr = res.lstFillRecord;
					if(arr && arr.length > 0){
						switch(status) {
							case 0: this.list0 = this.list0.concat(arr); this.page0 += 1; break;
							case 1: this.list1 = this.list1.concat(arr); this.page1 += 1; break;
							case 2: this.list2 = this.list2.concat(arr); this.page2 += 1; break;
						}
					}
				});
			},
			//打开/关闭日期筛选弹窗
			openCloseDate() {
				this.showPopup = !this.showPopup;
			},
			//确认日期筛选
			onSubmit(start, end) {
				this.showPopup = false;
				this.startTime = start;
				this.endTime = end;
				this.hasSelect();
			},
			//取消日期筛选
			onCancle(bool) {
				this.showPopup = bool;
			}
		}
	}
</script>

<style lang="scss">
	/* 顶部区域 */
	.total {
		width: 750rpx;
		height: 260rpx;
		border: 1rpx solid rgba(0,0,0,0);
		background-color: $color-primary;
		.tip {
			width: 100%;
			font-size: 24rpx;
			color: $color-blue-light;
			margin-top: 50rpx;
			margin-left: 50rpx;
		}
		.mount {
			margin-top: 50rpx;
			padding-left: 50rpx;
			padding-right: 30rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			.num {
				flex: 1;
				font-size: 72rpx;
				font-family: $font-family-num;
				color: $color-white;
			}
		}
	}
	
	/* 列表 */
	.listview {
		width: 750rpx;
		margin-top: 260rpx + $tab-card-heg;
	}
	.list-card {
		width: 100%;
		padding: 34rpx 30rpx;
		margin-top: $spacing-col;
		background-color: $color-white;
		.top {
			width: 100%;
			display: flex;
			flex-direction: row;
			align-items: center;
			.type {
				flex: 1;
				font-size: 32rpx;
			}
			.num {
				font-size: 36rpx;
				color: $color-primary;
			}
		}
		.btm {
			width: 100%;
			margin-top: 30rpx;
			text-align: end;
			color: $color-grey;
			font-size: 24rpx;
		}
	}
	
	.select_btn {
		width: 160rpx;
		position: relative;
		margin-bottom: -10rpx;
		
		.date-content {
			position: absolute;
			bottom: 55rpx;
			white-space: nowrap;
			> view {
				font-size: 22rpx;
				color: #FFFFFF;
			}
		}
	}
</style>
